<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:nth-child(2){
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li>
                <p>
                    <span>JavaScript权威指南</span>
                    <!--
                        禁止a标签跳转
                        href="javascript:;"
                        href="javascript:void(0)"
                    -->
                    <a href="javascript:;">编辑</a>
                </p>
                <p>
                    <input type="text">
                    <a href="javascript:;">保存</a>
                    <a href="javascript:;">取消</a>
                </p>
            </li>
            <li>
                <p>
                    <span>JavaScript权威指南</span>
                    <!--
                        禁止a标签跳转
                        href="javascript:;"
                        href="javascript:void(0)"
                    -->
                    <a href="javascript:;">编辑</a>
                </p>
                <p>
                    <input type="text">
                    <a href="javascript:;">保存</a>
                    <a href="javascript:;">取消</a>
                </p>
            </li>
            <li>
                <p>
                    <span>JavaScript权威指南</span>
                    <!--
                        禁止a标签跳转
                        href="javascript:;"
                        href="javascript:void(0)"
                    -->
                    <a href="javascript:;">编辑</a>
                </p>
                <p>
                    <input type="text">
                    <a href="javascript:;">保存</a>
                    <a href="javascript:;">取消</a>
                </p>
            </li>
            <li>
                <p>
                    <span>JavaScript权威指南</span>
                    <!--
                        禁止a标签跳转
                        href="javascript:;"
                        href="javascript:void(0)"
                    -->
                    <a href="javascript:;">编辑</a>
                </p>
                <p>
                    <input type="text">
                    <a href="javascript:;">保存</a>
                    <a href="javascript:;">取消</a>
                </p>
            </li>
            <li>
                <p>
                    <span>JavaScript权威指南</span>
                    <!--
                        禁止a标签跳转
                        href="javascript:;"
                        href="javascript:void(0)"
                    -->
                    <a href="javascript:;">编辑</a>
                </p>
                <p>
                    <input type="text">
                    <a href="javascript:;">保存</a>
                    <a href="javascript:;">取消</a>
                </p>
            </li>
        </ul>
    </div>
    <script>
        // var a = document.getElementsByTagName("a");
        // var p = document.getElementsByTagName("p");
        // var input = document.getElementsByTagName("input")[0];
        // var span = document.getElementsByTagName("span")[0];
        // a[0].onclick = function(){
        //     p[0].style.display = "none";
        //     p[1].style.display = "block";
        //     input.value = span.innerText;
        // }
        // a[1].onclick = function(){
        //     p[0].style.display = "block";
        //     p[1].style.display = "none";
        //     span.innerText = input.value;
        // }
        // a[2].onclick = function(){
        //     p[0].style.display = "block";
        //     p[1].style.display = "none";
        // }

        //由于li比较多，子元素又都需要，所以建议获取li
        // var li0 = document.getElementsByTagName("li")[0];
        // var a = li0.getElementsByTagName("a");
        // var p = li0.getElementsByTagName("p");
        // var input = li0.getElementsByTagName("input")[0];
        // var span = li0.getElementsByTagName("span")[0];
        // a[0].onclick = function(){
        //     p[0].style.display = "none";
        //     p[1].style.display = "block";
        //     input.value = span.innerText;
        // }
        // a[1].onclick = function(){
        //     p[0].style.display = "block";
        //     p[1].style.display = "none";
        //     span.innerText = input.value;
        // }
        // a[2].onclick = function(){
        //     p[0].style.display = "block";
        //     p[1].style.display = "none";
        // }

        // var li1 = document.getElementsByTagName("li")[1];
        // var a = li1.getElementsByTagName("a");
        // var p = li1.getElementsByTagName("p");
        // var input = li1.getElementsByTagName("input")[0];
        // var span = li1.getElementsByTagName("span")[0];
        // a[0].onclick = function(){
        //     p[0].style.display = "none";
        //     p[1].style.display = "block";
        //     input.value = span.innerText;
        // }
        // a[1].onclick = function(){
        //     p[0].style.display = "block";
        //     p[1].style.display = "none";
        //     span.innerText = input.value;
        // }
        // a[2].onclick = function(){
        //     p[0].style.display = "block";
        //     p[1].style.display = "none";
        // }

        //既然li比较多，然后根据每一段代码能够看出来其实变化就是li的下标，找到具体的li元素的问题，所以li就是一个可以变化的参数
        //因为实际操作的情况下不一定是按照顺序来操作，所以页面一加载的 时候需要将所有的li全部输出
        var li = document.getElementsByTagName("li");
        for(var i = 0;i<li.length;i++)
        {
            edit(li[i]); //调用函数
        }
        function edit(parent){ //parent = li[i]
            var a = parent.getElementsByTagName("a");
            var p = parent.getElementsByTagName("p");
            var input = parent.getElementsByTagName("input")[0];
            var span = parent.getElementsByTagName("span")[0];
            a[0].onclick = function(){
                p[0].style.display = "none";
                p[1].style.display = "block";
                input.value = span.innerText;
            }
            a[1].onclick = function(){
                p[0].style.display = "block";
                p[1].style.display = "none";
                span.innerText = input.value;
            }
            a[2].onclick = function(){
                p[0].style.display = "block";
                p[1].style.display = "none";
            }
        }
    </script>
</body>
</html>